<template>
    <div>
      <van-nav-bar
      title="影院"
      @click-left="handleLeft()"
      @click-right="handleRight()"
      >
        <template #left>
          {{cityName}}<van-icon name="arrow-down" color="#666"/>
        </template>
        <template #right>
          <van-icon name="search" size="24" color="#000"/>
        </template>
      </van-nav-bar>
      <div class="cinema" :style="{height:height}">
        <van-list>
            <van-cell v-for="data in this.cinemaList" :key="data.cinemaId">
                <div>{{data.name}}</div>
                <div class="address">{{data.address}}</div>
            </van-cell>
        </van-list>
      </div>
    </div>
</template>
<script>
import BetterScroll from 'better-scroll'
import Vue from 'vue'
import { NavBar, Icon, List, Cell } from 'vant'
import { mapActions, mapMutations, mapState } from 'vuex'
Vue.use(NavBar)
Vue.use(Icon).use(List).use(Cell)

export default {
  data () {
    return {
      height: 0
    }
  },
  methods: {
    ...mapActions('CinemaModule', ['getCinemaList']),
    ...mapMutations('CinemaModule', ['clearCinemaList']),
    handleLeft () {
      // 清空cinemaList
      // this.$store.commit('clearCinemaList')
      this.clearCinemaList()
      this.$router.push('/city')
    },
    handleRight () {
      this.$router.push('/cinema/search')
    }
  },
  computed: {
    ...mapState('CinemaModule', ['cinemaList']),
    ...mapState('CityModule', ['cityId', 'cityName'])
  },
  mounted () {
    // 访问cityName，cityId
    // 获取可是窗口的高度
    this.height = document.documentElement.clientHeight - 100 + 'px'

    if (this.cinemaList.length === 0) {
      // Vuex 异步流程
      this.getCinemaList(this.cityId).then(res => {
        // 状态立即更改，当时dom异步渲染
        this.$nextTick(() => {
          new BetterScroll('.cinema', {
            scrollbar: {
              fade: true
            }
          })
        })
      })
    } else {
      console.log('缓存')
      this.$nextTick(() => {
        new BetterScroll('.cinema', {
          scrollbar: {
            fade: true
          }
        })
      })
    }
    /* this.cinemaList = res.data.data.cinemas

        */
  }
}
</script>
<style lang="scss" scoped>
    li{
        padding: 5px;
        .address{
            font-size: 12px;
            color: #666;
        }
    }
</style>
<style lang="scss" scoped>
  .cinema{
    overflow: hidden;
    position: relative; // 修正滚动条位置
  }
</style>
